<template>
  <div>
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      style="overflow-y: auto;"
      v-loading="loading"
      row-key="id"
      :data="tableData"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        v-if="showIndex"
        type="index"
        fixed
        align="center"
        :index="tableIndex">
      </el-table-column>
      <el-table-column v-for="(item,key) in columns"
                       :fixed="key < fixedLeft"
                       :prop="item.prop"
                       :label="item.label"
                       :width="item.width?item.width:''"
                       :key="key"
                       align="left"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-if="item.render" v-html="item.render(scope.row[item.prop])"></div>
          <template v-else>{{scope.row[item.prop]}}</template>
        </template>
      </el-table-column>
      <slot></slot>
      <template slot="empty">
        <my-empty></my-empty>
      </template>
    </el-table>
    <el-pagination
      class="_table-pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :style="{'float': paginationFloat}"
      v-if="pagination"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :layout="layout"
      :total="data.length">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    name: "my-table-auto",
    props: {
      /** table表头(column)的数组 接收prop,label,width **/
      /** 如果字段很少不要都设置列宽，以免到右浮动的操作区域中间留白，如果字段过多请设置列宽 **/
      columns: {
        type: Array,
        default: ()=>{
          return []
        }
      },
      /** 左侧有几个column固定 **/
      fixedLeft: {
        type: Number,
        default: 0
      },
      /** 可切换单页容量 **/
      /** 分页插件显示的功能组件 **/
      layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
      },
      /** 分页插件是否启用 **/
      pagination: {
        type: Boolean,
        default: true
      },
      /** 分页插件浮动方向 css float 如left right **/
      paginationFloat: {
        type: String,
        default: 'right'
      },
      /** table loading **/
      loading:{
        type: Boolean,
        default: false
      },
      /** 是否显示index编码 **/
      showIndex:{
        type: Boolean,
        default: true
      },
      /** 数据 **/
      data:{
        type: Array,
        default: ()=>{
          return []
        }
      }
    },
    data(){
      return{
        tableData: [],
        page: 1,
        pageSize: 10,
        pageSizes: [10,20,50,100]
      }
    },
    methods:{
      /** 返回分页插件的方法 **/
      handleSizeChange(val){
        this.pageSize = val
      },
      /** 返回分页插件的方法 **/
      handleCurrentChange(val){
        this.page = val
      },
      /** table索引 **/
      tableIndex(index){
        return index + 1 + (this.page - 1) * this.pageSize
      }
    },
    created() {

    },
    watch:{
      data: {
        deep: true,
        immediate: true,
        handler(val){
          this.tableData = val.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
        }
      },
      page(val){
        this.tableData = this.data.slice((val - 1) * this.pageSize, val * this.pageSize)
      },
      pageSize(val){
        this.tableData = this.data.slice((this.page - 1) * val, this.page * val)
      }
    }
  }
</script>

<style lang="scss" scoped>
  ._table-pagination{
    min-height: 35px;
    margin-top: 5px;
  }
  ::v-deep .el-table__row{
    td:not(.is-hidden):last-child{
      border-left:1px solid #EBEEF5; // 颜色根据你表格的颜色自定义，当前颜色是element默认的颜色
    }
  }
  ::v-deep .el-table__header{
    th:not(.is-hidden):last-child{
      border-left:1px solid #EBEEF5; // 颜色根据你表格的颜色自定义，当前颜色是element默认的颜色
    }
    ::v-deep .el-table th.gutter{
      display: table-row!important;
    }
  }
</style>
